<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="虚拟钥匙控车单详情">
        <card class="add-info-card" title="虚拟钥匙控车单" toggle>
          <a-descriptions :align="{ label: 'right' }">
            <a-descriptions-item label="车牌号">{{ carInfo.licenseNo }}</a-descriptions-item>
            <a-descriptions-item label="车架号">{{ carInfo.vin }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ carInfo.modelName }}</a-descriptions-item>
            <a-descriptions-item label="车牌颜色">{{ carInfo.licenseColor }}</a-descriptions-item>
            <a-descriptions-item label="设备SN/ID">{{ carInfo.equipmentId }}</a-descriptions-item>
            <a-descriptions-item label="设备供应商">{{ carInfo.supplier }}</a-descriptions-item>
          </a-descriptions>
        </card>
        <card class="add-info-card" title="详情" toggle>
          <a-descriptions :align="{ label: 'right' }">
            <a-descriptions-item label="开始时间">{{ carInfo.startTime }}</a-descriptions-item>
            <a-descriptions-item label="结束时间">{{ carInfo.endTime }}</a-descriptions-item>
            <a-descriptions-item label="关联业务类型">{{ carInfo.refTypeName }}</a-descriptions-item>
            <a-descriptions-item label="控车人姓名">{{ carInfo.memberName }}</a-descriptions-item>
            <a-descriptions-item label="控车人电话">{{ carInfo.memberPhone }}</a-descriptions-item>
            <a-descriptions-item label="关联业务单号">{{ carInfo.refCode }}</a-descriptions-item>
          </a-descriptions>
        </card>
        <card class="add-info-card" title="其他信息" toggle>
          <a-descriptions :align="{ label: 'right' }">
            <a-descriptions-item label="控车单号">{{ carInfo.controlCode }}</a-descriptions-item>
            <a-descriptions-item label="单据状态">{{ carInfo.statusName }}</a-descriptions-item>
            <a-descriptions-item label="">&nbsp;</a-descriptions-item>
            <a-descriptions-item label="备注">{{ carInfo.remark }}</a-descriptions-item>
          </a-descriptions>
        </card>
      </a-tab-pane>
      <a-tab-pane key="2" title="操作记录">
        <OperateLog :id="routePrams.id" :list="list" type="41" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="CarVirtualKeyDetail">
  import { carControlDetail } from '@/api/asset/virtualKey'
  import { onMounted, ref, watch } from 'vue'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const routeQuery = route.query
  const activeType = ref('1')
  if (routeQuery.activeType) {
    activeType.value = routeQuery.activeType
  }
  const carInfo = ref({})
  const getDetail = (id) => {
    carControlDetail({ id: id }).then((res) => {
      carInfo.value = res.result
    })
  }

  // list 配置
  const list = [
    { title: '操作人', dataIndex: 'userName', width: 150 },
    { title: '操作时间', dataIndex: 'operateTime', width: 120 },
    { title: '操作', width: 160, dataIndex: 'node' },
    { title: '备注', width: 160, slotName: 'log' },
  ]

  // 默认选中某个 tab
  watch(
    () => routeQuery.activeType,
    (newVal) => {
      if (newVal) activeType.value = routeQuery.activeType
    },
    { immediate: true }
  )
  onMounted(() => {
    const id = routePrams.id
    if (id) {
      getDetail(id)
    }
  })
</script>
